<template>
	<view>
		<u-navbar :is-back="showBack" :border-bottom="true" :customBack='leftClick'>我的发票</u-navbar>
		<view class="infor">
			<view class="font14 titleyear">2024年度</view>
			<view class="flex flex-row-between">
				<view class="flex flex-column-center flex-row-between">
					<image src="https://www.haopengsong.xyz/static/success.png" class="successimg"></image>
					<view class="font16">{{info.username}}</view>
				</view>
				<view class="flex flex-row-between carpaizhao">
					<image src="https://www.haopengsong.xyz/static/car.png" class="carimg"></image>
					{{info.car_num}}
				</view>
			</view>
			<view class="shenhetime">
				审核时间：{{checkInfor.check_time}}
			</view>
		</view>
		<view class="width boxwhite">
			<u-card :show-head='false'  v-for="(item,index) in ticketinfo" :key='index'>
					<view class="" slot="body">
						<view class="u-body-item u-flex u-row-between u-p-b-0">
							<view class="u-body-item-title u-line-2">中天优速通-发票</view>
							<image :src="item.ticket_file" v-if='item.is_ticket_name == "已开票"'></image>
						</view>
					</view>
					<view class="" slot="foot" style="color:#217bfb;" v-if='item.is_ticket_name == "已开票"' @click="downloadFun(item.ticket_file)">点击查看大图</view>
					<view class="" slot="foot" style="color:#217bfb;" v-else @click="jump('/pages/mine/ticket/applyticket',item)">提交抬头</view>
				</u-card>
		</view>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js";
	import { ticket } from "@/api/ticket.js";
	import { download } from "@/api/common.js";
	import html2canvas from 'html2canvas';
	export default {
		data(){
			return {
				showBack:true,
				info:storage.getUserInfo().info,
				checkInfor:storage.getUserInfo().check,
				ticketinfo:[]
			}
		},
		onShow() {
			this.getInfo()
		},
		methods:{
			downloadFun(data){
				window.open(data);
			},
			jump(url,data){
				if(this.info.is_seek == 2){
					uni.showToast({
						title: "请先在我的资料，提交“网络预约出租车运输证”之后，再申请发票",
						icon: "none"
					});
					return false
				}
				uni.navigateTo({
					url:url+'?id='+data.id
				})
			},
			//跳转到首页
			leftClick(){
				uni.switchTab({
					url: "/pages/tabbar/home/index"
				});
			},
			getInfo(data){
				ticket(data).then((res) => {
					this.ticketinfo = res
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.img{
		width:100%;
	}
	.boxwhite{
		padding:10px;
		background-color: #fff;
		margin:20px auto;
	}
	.noticket{
		color:#666;
		padding: 20px 0;
		text-align: center;
	}
	.itemliucheng{
		color: #777;
		font-size: 14px;
		padding: 10px 8px 0 0px;
	}
	.infor{
		.titleyear{
			text-align:right;
			font-size: 12px;
			color:#666;
		}
		background-color: #fff;
		width: 100%;
		margin: auto;
		padding: 15px;
		font-size: 12px;
		color:#333;
		.successimg{
			width: 60px;
			height: 60px;
			margin-right: 10px;
		}
		.carimg{
			width: 20px;
			height: 20px;
			margin-right: 5px;
		}
		.carpaizhao{
			color:#666;
		}
		.shenhetime{
			border-top: 1px solid #ececec;
			padding-top: 20px;
			margin-top: 15px;
			font-size: 12px;
			color:#666;
		}
	}
	.btn{
		border-radius: 100px;
		width: 100%;
		margin-top: 20px;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;
		color: #ffffff;
		background: linear-gradient(57.72deg, #197bfb 18.14%, #217bfb 98.44%);
	}
	.titlesp{
		font-weight: 700;
		font-size: 17px;
		color: #323233;
		letter-spacing: 0;
		position: relative;
		z-index: 2;
		padding-left: 10px;
		margin: 15px auto;
	}
	.titlesp::after{
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		bottom: 0;
		width: 31px;
		height: 11px;
		background-image: -webkit-gradient(linear, right top, left top, from(#fff), to(#217bfb));
		background-image: -webkit-linear-gradient(right, #fff, to(#217bfb));
		background-image: linear-gradient(270deg, #fff, to(#217bfb));
	}
	.u-card-wrap { 
			background-color: $u-bg-color;
			padding: 1px;
		}
		
		.u-body-item {
			font-size: 32rpx;
			color: #333;
			padding: 20rpx 10rpx;
		}
			
		.u-body-item image {
			width: 120rpx;
			flex: 0 0 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			margin-left: 12rpx;
		}
</style>